<template>
  <div class="playmodel" v-if="songItem">
    <audio
      :src="songurl"
      controls
      class="audio"
      ref="audio"
      autoplay
      muted
      @timeupdate="audiotimeupdate"
    ></audio>
    <div class="img" @click="clickDetail">
      <img
        :src="songItem.al.picUrl"
        :class="['animate', { stoped: !isplaying }]"
      />
    </div>
    <div class="msg">
      <div :class="['name', { stoped: !isplaying }]">
        {{ songItem.al.name }}
        {{ songItem.alia[0] }}
      </div>
      <!-- <van-notice-bar scrollable :text="songItem.al.name+songItem.alia[0]" background="#fff" color="#000"/> -->
    </div>
    <div class="controls">
      <div>
        <canvas ref="canvas" @click="playToggle"></canvas>
        <div
          class="iconfont icon-icon-13 play"
          v-if="!isplaying"
          @click="playToggle"
        ></div>
        <div
          class="iconfont icon-icon-18 play"
          v-if="isplaying"
          @click="playToggle"
        ></div>
      </div>
      <i class="iconfont icon-icon-1 playlist" @click="showmusicList"></i>
    </div>
    <transition
      :duration="{ enter: 1000, leave: 500 }"
      enter-active-class="animate__animated animate__fadeInUpBig"
      enter-to-class="animate__animated animate__fadeInUpBig"
      leave-active-class="animate__animated animate__fadeOutDown"
      leave-to-class="animate__animated animate__fadeOutDown"
    >
      <play-detail
        v-show="showDetail"
        @propDetail="propDetail"
        @detailsplay="detailsplay"
        :isPlay="isplaying"
        :currentTime="currentTime"
        :duration="duration"
        @sendchangesroll="sendchangesroll"
      ></play-detail>
    </transition>

    <music-list
      :showmusicList="isshowmusicList"
      @hide="hidemusicList"
    ></music-list>
  </div>
</template>

<script>
import { mapState,mapMutations } from "vuex";
import playDetail from "@/components/playDetail.vue";
import musicList from "@/components/musicList.vue";
export default {
  name: "play",
  data() {
    return {
      isplaying: false,
      songurl: "",
      str: "",
      showDetail: false,
      currentTime: 0,
      duration: 0,
      isshowmusicList: false,
    };
  },
  components: {
    playDetail,
    musicList,
  },
  methods: {
    //播放||停止
    playToggle() {
      this.isplaying = !this.isplaying;
      let audio = this.$refs.audio;
      if (audio !== null) {
        //检测播放是否已暂停.audio.paused 在播放器播放时返回false.
        if (this.isplaying && this.songItem) {
          setTimeout(() => {
            audio.play(); //audio.play();// 这个就是播放
          }, 500);
          this.drawCircle(audio.currentTime, audio.duration);
        } else {
          audio.pause(); // 这个就是暂停
        }
      }
      //   console.log(this.isplaying, audio);
    },
    //获取播放地址
    audioPlay() {
      let url =
        "https://apis.netstart.cn/music/song/url?id=" + this.songItem.id;
      axios.get(url).then((res) => {
        this.songurl = res.data.data[0].url;
        this.playToggle();
      });
    },
    //绘制canvas
    drawCircle(curTime, allTime) {
      // console.log(this.$refs["canvas"]);
      if (this.$refs["canvas"]) {
        let canvas = this.$refs["canvas"];
        let w = window.innerWidth;
        let size = (w / 375) * 30;
        canvas.width = size;
        canvas.height = size;
        let x = size / 2;
        let y = size / 2;
        let r = size / 2.5;
        let ctx = canvas.getContext("2d");
        let draw = (x, y, r, s, e, color) => {
          ctx.beginPath();
          ctx.strokeStyle = color;
          ctx.lineWidth = 3;
          // 绘制圆/弧形
          ctx.arc(x, y, r, (s * Math.PI) / 180, (e * Math.PI) / 180, false);
          ctx.stroke();
          ctx.closePath();
        };

        // 清除画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // 默认的圆
        draw(x, y, r, 0, 360, "#fff");

        // 计算结束的弧度
        let demo = curTime / allTime;
        // 再次绘制
        draw(x, y, r, 0, 360 * demo, "#9917f7");
        // console.log(w,size);
      }
    },
    //更新播放进度
    audiotimeupdate() {
      let audio = this.$refs.audio;
      this.drawCircle(audio.currentTime, audio.duration);
      // console.log(audio.currentTime,audio.duration);
      this.currentTime = audio.currentTime;
      this.duration = audio.duration;
    },
    //弹出详情
    clickDetail() {
      this.showDetail = !this.showDetail;
    },
    //接收详情页显示隐藏
    propDetail(e) {
      this.showDetail = e.showDetail;
    },
    //接收详情页播放||停止
    detailsplay(e) {
      this.isplaying = e.isPlay;
    },
    //显示隐藏歌单
    showmusicList() {
      this.isshowmusicList = !this.isshowmusicList;
    },
    //接收隐藏指令
    hidemusicList(e) {
      // console.log(e);
      this.isshowmusicList = e;
    },
    //接收拖动进度
    sendchangesroll(e) {
      let audio = this.$refs.audio;
      audio.currentTime = (e * audio.duration) / 100;
    },
    //自动播放下一首
    ...mapMutations(["xplaysong"]),
     nextsong() {
      for (let i = 0; i < this.nowList.length; i++) {
        if (this.nowList[i].name == this.songItem.name) {
          if (i == this.nowList.length - 1) {
            this.xplaysong(this.nowList[0]);
            break;
          } else {
            this.xplaysong(this.nowList[i + 1]);
            break;
          }
        }
      }
    },
  },

  computed: {
    ...mapState(["songItem"]),
    ...mapState(["nowList"]),
  },
  watch: {
    //监听歌曲信息
    songItem() {
      this.audioPlay();
      this.isplaying = false;
    },
    isplaying() {
      let audio = this.$refs.audio;
      if (this.isplaying && this.songItem) {
        setTimeout(() => {
          audio.play();
        }, 500);
      } else {
        audio.pause();
      }
    },
    currentTime(){

      if(this.currentTime==this.duration){
       this.playToggle()
       this.nextsong()
      }
      
    }
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.playmodel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  z-index: 2;
  box-shadow: 0px -8px 5px #ccc;
  padding: 0 5px;
  box-sizing: border-box;

  .img {
    flex: 0 0 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;

    img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
    }

    .animate {
      animation: img 10s linear infinite;
    }
    .animate.stoped {
      animation-play-state: paused; //暂停
    }
    @keyframes img {
      0% {
        transform: rotate(0);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  }

  .msg {
    width: 100%;
    // font-size: 18px;
    overflow: hidden;
    white-space: nowrap;
    .name {
      width: 100%;
      font-size: 14px;
      transform: translateX(0);
      animation: name linear 10s infinite;
      animation-delay: 2s;
      span {
      }
    }
    .name.stoped {
      animation-play-state: paused; //暂停
    }
    @keyframes name {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(-100%);
      }
    }
  }

  .controls {
    display: flex;
    > div {
      position: relative;
      canvas {
        position: absolute;
        top: 0px;
        left: 0px;
        transform: rotate(-90deg);
      }
      .play {
        font-size: 30px;
        z-index: 3;
      }
    }

    .playlist {
      font-size: 30px;
      padding-left: 10px;
    }
  }

  .audio {
    position: absolute;
    left: 0;
    bottom: -100px;
    opacity: 0;
  }
}
</style>
